<div class="content">
  <div *ngIf="!spread">
    Loading...
  </div>
  <div *ngIf="spread">
    <table class='best-quotes'>
      <tr>
        <th></th>
        <th>Broker</th>
        <th>Price</th>
        <th>Volume</th>
      </tr>
      <tr>
        <td>Best Ask</td>
        <td>{{spread.ask.broker}}</td>
        <td>{{spread.ask.price | currency:'JPY':'symbol':'.0'}}</td>
        <td>{{spread.ask.volume | number:'.3-3'}} BTC</td>
      </tr>
      <tr>
        <td>Best Bid</td>
        <td>{{spread.bid.broker}}</td>
        <td>{{spread.bid.price | currency:'JPY':'symbol':'.0'}}</td>
        <td>{{spread.bid.volume | number:'.3-3'}} BTC</td>
      </tr>
      <tr>
        <td>Spread</td>
        <td></td>
        <td>{{-spread.invertedSpread | number}}</td>
      </tr>
    </table>
    <table class='spread-analysis'>

      <tr>
        <td>Available Volume</td>
        <td>{{spread.availableVolume | number:'.3-3'}} BTC</td>
      </tr>
      <tr>
        <td>Target Volume</td>
        <td>{{spread.targetVolume | number:'.3-3'}} BTC</td>
      </tr>
      <tr>
        <td>Expected Profit</td>
        <td>{{spread.targetProfit | currency:'JPY':'symbol':'.0'}}</td>
      </tr>
      <tr>
        <td>Expected Profit %</td>
        <td>{{spread.profitPercentAgainstNotional | number:'.3-3'}}%</td>
      </tr>
    </table>
    <div>
      <i [class.ok]='limitCheckResult.success' [class.ng]='!limitCheckResult.success' class="fas fa-circle"></i> {{limitCheckResult.message}}
    </div>
  </div>
</div>
